<template>
    <div class="form">
        <el-form ref="ruleFormRef" :model="formData" status-icon label-width="auto" label-position="right">
            <el-row align="middle" :gutter="30" justify="start">
                <template v-for="(item, index) in formConfig" :key="item.formName">
                    <el-col v-bind="layout" class="row" v-show="!isCollapse ? index <= showFormLength : true">
                        <el-form-item :label="item.labelName" :prop="item.formName">
                            <template v-if="item.formType === 'input'">
                                <el-input v-model="formData[item.formName]" autocomplete="off" :placeholder="item.placeholder" />
                            </template>
                            <template v-else-if="item.formType === 'select'">
                                <el-select
                                    v-model="formData[item.formName]"
                                    :placeholder="item.placeholder"
                                    style="width: 100%"
                                    :suffix-icon="CaretBottom"
                                    @change="selectChange($event, item.formName)"
                                >
                                    <el-option v-for="select in item.options" :key="select.value" :label="select.label" :value="select.value" />
                                </el-select>
                            </template>
                            <template v-else-if="item.formType === 'dataPicker'">
                                <el-date-picker
                                    v-model="formData[item.formName]"
                                    :type="item.type"
                                    :start-placeholder="item.startPlaceholder"
                                    :end-placeholder="item.endPlaceholder"
                                    :placeholder="item.placeholder"
                                    format="YYYY-MM-DD"
                                    value-format="YYYY-MM-DD"
                                    style="width: 100%"
                                />
                            </template>
                            <template v-else-if="item.formType === 'cascader'">
                                <el-cascader v-model="formData[item.formName]" :placeholde="item.placeholder" :options="item.options" style="width: 100%" :props="item.props" />
                            </template>
                            <template v-else-if="item.formType === 'slot'">
                                <slot :name="item.slotName"></slot>
                            </template>
                        </el-form-item>
                    </el-col>
                </template>
                <el-col v-bind="layout" class="row">
                    <slot></slot>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import { inject, onUnmounted, ref } from "vue";

import { CaretBottom } from "@element-plus/icons-vue";
import emitter from "@/bus/index.js";
import { useChangeColor } from "@/hooks/useChangeColor.js";
const { formFontColor, bgColor, borderColor } = useChangeColor();
const emits = defineEmits(["selectChange"]);
const props = defineProps({
    isShowMoreSeach: {
        type: Boolean,
        default: true
    }
});
const formData = inject("formData", () => ({}));
const formConfig = inject("formConfig", () => []);
const layout = inject("layout", {
    xs: 24,
    sm: 24,
    md: 12,
    lg: 8,
    xl: 6
});

const isCollapse = ref(false);
function collapse(collapse) {
    isCollapse.value = collapse;
}
const selectChange = (val, name) => {
    console.log(val, name);
    emits("selectChange", val, name);
};
emitter.on("collapse", collapse);
const showFormLength = ref(getFormLength());
function getFormLength() {
    if (!props.isShowMoreSeach) return 10;
    if (document.body.clientWidth >= 1920) {
        return 2;
    } else if (document.body.clientWidth >= 1200) {
        return 1;
    } else {
        return 0;
    }
}
onUnmounted(() => {
    emitter.off("collapse", collapse);
});
</script>

<style lang="less" scoped>
.form {
    flex: 1;

    :deep(.el-form-item) {
        margin-bottom: 0;
    }

    .row {
        margin-bottom: 20px;
    }
    :deep(.el-form-item__label) {
        font-size: 14px;
        font-weight: 400;
        color: v-bind(formFontColor);
    }
    :deep(.el-input) {
        --el-input-border-color: v-bind(borderColor);
        --el-input-bg-color: v-bind(bgColor);
    }
    :deep(.el-input__inner) {
        color: v-bind(formFontColor);
    }
    :deep(.el-input__wrapper) {
        width: 100%;
        box-sizing: border-box;
    }
}
</style>
